<script setup>
import { ref, onMounted, watch, onUnmounted } from "vue";

import tire1 from "@/assets/img/products/badlands/tire1.png";
import tireImg from "@/assets/img/home/tires/defaultTire.png";
import imgZoomVue from "./imgZoom.vue";

const props = defineProps({
  productPic: {
    type: String,
    // default: true,
  },
});
let tireArr = ref([]);
let curPath = ref("");
let rightArr = ref([]);
let initWidth = ref(350);
let initHeight = ref(525);
const changeImg = (index) => {
  let temp = curPath.value;
  curPath.value = rightArr.value[index];
  rightArr.value[index] = temp;
};
const screenWidth = ref(window.innerWidth);
const updateScreenWidth = () => {
  screenWidth.value = window.innerWidth;
};
watch(
  () => props.productPic,
  (newRouterName) => {
    if (newRouterName) {
      if (typeof newRouterName == "string" && newRouterName.indexOf(",") > -1) {
        tireArr.value = newRouterName.split(",");
      } else {
        tireArr.value = [newRouterName];
      }
      curPath.value = tireArr.value[0];
      rightArr.value = tireArr.value.slice(1);
    }
  },
  { immediate: true }
);
// 监听screenWidth变量，可以在它变化时执行一些逻辑
watch(screenWidth, (newWidth, oldWidth) => {
  if (newWidth < 500) {
    initWidth.value = 220;
    initHeight.value = 220;
  } else {
    initWidth.value = 350;
    initHeight.value = 350;
  }
  console.log(`屏幕宽度从 ${oldWidth} 变为 ${newWidth}`);
  // 这里可以根据newWidth的值进行相应的逻辑处理
});
onMounted(() => {
  if (screenWidth.value < 500) {
    initWidth.value = 220;
    initHeight.value = 220;
  } else {
    initWidth.value = 350;
    initHeight.value = 350;
  }
  window.addEventListener("resize", updateScreenWidth);
});
// 组件卸载前移除事件监听，避免内存泄露
onUnmounted(() => {
  window.removeEventListener("resize", updateScreenWidth);
});
</script>
<template>
  <div
    style="
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    "
  >
    <!-- <img
      style="width: calc(100% - 150px); object-fit: contain"
      :src="tireArr[0] || tireImg"
    /> -->
    <imgZoomVue
      :url="curPath || tireImg"
      :initWidth="initWidth"
      :initHeight="initHeight"
    />
    <div
      v-if="tireArr.length > 1"
      style="
        width: 100px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
      "
    >
      <img
        v-for="(item, index) in rightArr"
        :key="index"
        width="80"
        height="80"
        style="object-fit: contain; margin: 5px 0"
        :src="item"
        class="show-pointer"
        @click="changeImg(index)"
      />
    </div>
  </div>
</template>

<style scoped>
li {
  list-style: none;
}
/* tsShopContainer */
#tsShopContainer li,
#tsShopContainer img {
  vertical-align: top;
}
#tsShopContainer {
  width: 100%;
  margin: 40px auto 0 auto;
  position: relative;
  font-size: 12px;
  padding-bottom: 5px;
}
#tsShopContainer #tsImgS {
  text-align: center;
  width: 100%;
  position: relative;
}
#tsShopContainer #tsImgS a {
  display: block;
  text-align: center;
  margin: 0px auto;
}
#tsShopContainer #tsImgS img {
  border: 0px;
}
#tsShopContainer #tsPicContainer {
  width: 100%;
  height: 320px;
  position: relative;
  /* background: url(../images/scrollPicbg.gif) repeat-x 0px 0px; */
}

#tsShopContainer #tsPicContainer #tsImgSCon {
  position: absolute;
  top: 6rem;
  left: 0;
  width: 100%;
  overflow: hidden;
}
#tsShopContainer #tsPicContainer #tsImgSCon ul {
  width: 100%;
  overflow: hidden;
}
#tsShopContainer #tsPicContainer #tsImgSCon li {
  width: 30%;
  float: left;
  cursor: pointer;
}
#tsShopContainer #tsPicContainer #tsImgSCon li img {
  padding: 3px;
  margin: 1px;
  display: block;
}
#tsShopContainer #tsPicContainer #tsImgSCon li.tsSelectImg img {
  margin: 0px;
}
</style>
